<!--结单分为四个状态，已结算、付款中、已结单、查看-->
<!--根据不同的状态’字段是否可以编辑-->
<template>
  <el-dialog
    title="结单"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="600px"
    append-to-body
    class="borderb_dia"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="会员ID：" prop="id">
        {{ userId }}
      </el-form-item>
      <el-form-item label="结算原因：" prop="type">
        <!--        除了在结单，其余不能编辑-->
        <el-select v-model="form.type" placeholder="请选择结算原因" class="full_w" :disabled="status !=1">
          <el-option v-for="(item,index) in trafficPayTypeList" :key="index" :label="item.label" :value="Number(item.value)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：" prop="reason">
        {{ status_name || '-' }}
      </el-form-item>
      <el-form-item label="结算状态：" prop="status" v-if="status !=5">
        <!--        已结单不能编辑-->
        <el-select v-model="form.status" placeholder="请选择结算原因" class="full_w" :disabled="status ==5">
          <el-option v-for="(item,index) in trafficPayStatusList" :key="index" :label="item.label" :value="Number(item.value)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算单：" prop="check_url" v-if="status ==1">
        <FileUpload v-model="form.check_url" :limit="1"></FileUpload>
      </el-form-item>
      <el-form-item label="结算单：" prop="check_url" v-else>
        <el-button type="primary" @click="downFile">下载</el-button>
      </el-form-item>

      <el-form-item label="金额：" prop="coin">
        <el-input v-model="form.coin" placeholder="请输入金额" :disabled="status !=2" @blur="getCoinTips"/>
      </el-form-item>
      <el-form-item label="结算银行卡：" prop="bankcard">
        <el-input v-model="form.bankcard" placeholder="请输入结算银行卡" :disabled="status !=2"/>
      </el-form-item>
      <el-form-item label="结算邮箱：" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" :disabled="status !=2"/>
      </el-form-item>
      <el-form-item label="结算账户名：" prop="username">
        <el-input v-model="form.username" maxlength="20" show-word-limit placeholder="请输入结算账户名" :disabled="status !=2"/>
      </el-form-item>
      <el-form-item label="订单ID:" prop="order_id">
        <el-input v-model="form.order_id" placeholder="请输入订单ID" :disabled="status !=2"/>
      </el-form-item>
      <el-form-item label="发票状态：" prop="invoice_status">
        <el-select v-model="form.invoice_status" placeholder="请选择发票状态" class="full_w" :disabled="status !=2 && status !=4">
          <el-option v-for="(item,index) in invoiceList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票邮寄单号:" prop="track_number" v-if="form.invoice_status==1">
        <el-input v-model="form.track_number" placeholder="请输入发票邮寄单号" :disabled="status !=2 && status !=4"/>
      </el-form-item>
      <el-form-item label="备注:" prop="msg">
        <el-input v-model="form.msg" placeholder="请输入备注" type="textarea" rows="5" :disabled="status ==5"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="footer-btn" v-if="status !=5">
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="onSubmit('form')">确认</el-button>
    </div>
    <div slot="footer" class="footer-btn" v-else>
      <el-button @click="handleCloseDialog">关闭</el-button>
    </div>
    <confirmAmount v-if="showConfirmAmount" :visableIf.sync="showConfirmAmount" :okCoin="okCoin" :coin="form.okCoin" @changeCoin="changeCoin"></confirmAmount>
  </el-dialog>
</template>

<script>
import { reqPayCheck, reqPayDataById, reqTrafficPayStatus, reqTrafficPayType } from '@/api/trafficMasterMgt'
import { userInfo } from '@/api/advmaster'
import confirmAmount from './confirmAmount.vue'
import CheckInfo from '@/views/submater/CheckInfo.vue'

export default {
  components: {
    CheckInfo,
    confirmAmount
  },
  data() {
    return {
      showConfirmAmount: false,
      userList: [],
      invoiceList: [
        { id: 0, name: '未发送' },
        { id: 1, name: '已发送' }
      ],
      statusList: [
        { id: 1, name: '审核通过' },
        { id: 2, name: '审核不通过' }
      ],
      status_name: '',//当前状态
      status: null,//当前状态匹配
      userId: null,
      okCoin: null,
      form: {
        id: this.rowitem.jd_id,
        username: '',//用户名
        bankcard: '',//银行卡信息
        email: '',
        coin: '',//金额
        status: '', //结单状态
        track_number: null,//发票单号
        order_id: null,
        invoice_status: '',//发票状态
        check_url: '',//结算单链接
        msg: '',//备注
        type: null

      },
      // 表单校验
      rules: {
        type: [
          { required: true, message: '请选择结单原因', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择结单状态', trigger: 'blur' }
        ],
        coin: [
          { required: true, message: '请填写金额', trigger: 'blur' }
        ],
        bankcard: [
          { required: true, message: '请填写银行卡号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱号码', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入结算账户名', trigger: 'blur' }
        ],
        order_id: [
          { required: true, message: '请填写发票单号', trigger: 'blur' }
        ],
        invoice_status: [
          { required: true, message: '请选择发票状态', trigger: 'blur' }
        ],
        track_number: [
          { required: true, message: '请填写发票单号', trigger: 'blur' }
        ],
        check_url: [
          { required: true, message: '上传结单单', trigger: 'blur' }
        ]
      },
      trafficPayTypeList: [],//结算列表
      trafficPayStatusList: []//结算状态

    }
  },
  props: {
    rowitem: {
      default: null
    }
  },
  created() {
    this.userId = this.rowitem.id
    this.getPayDataById()
    this.getTrafficPayType()
    this.getInfo()
  },
  watch: {
    'form.check_url'(val) {
      console.log('结算单', val)
    }
  },
  methods: {
    getCoinTips() {
      this.showConfirmAmount = true
    },
    changeCoin(val) {
      this.form.coin = val
    },
    // 获取info信息
    getInfo() {
      userInfo({ id: this.rowitem.custom_id }).then(res => {
        let user = res.data
        this.form.bankcard = user.invoice.bank_crad
        this.form.username = user.invoice.username
        this.form.email = user.email
      }).catch(() => {
        this.all_loading = false
      })
    },
    getTrafficPayStatus() {
      this.trafficPayStatusList = []
      reqTrafficPayStatus().then(res => {
        let data = res.data
        for (let key in data) {
          console.log('status', this.status)
          if (this.status == 1) {
            if (key != 0 && key != 8 && key != 1) {
              console.log('222')
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }
          if (this.status == 2) {
            if (key != 0 && key != 8 && key != 1 && key != 2) {
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }
          if (this.status == 4) {
            if (key != 0 && key != 8 && key != 1 && key != 2 && key != 4) {
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }

        }
        console.log('结算状态', this.trafficPayStatusList)
      })
    },
    getTrafficPayType() {
      this.trafficPayTypeList = []
      reqTrafficPayType().then(res => {
        console.log('结算原因', res.data)
        let data = res.data
        for (let key in data) {
          let obj = {
            value: key,
            label: data[key]
          }
          this.trafficPayTypeList.push(obj)
        }

      })
    },
    getPayDataById() {
      reqPayDataById(this.rowitem.jd_id).then(res => {
        console.log('结单信息', res.data)
        this.form.coin = res.data.coin
        this.okCoin = res.data.coin
        this.form.type = res.data.type
        this.status_name = res.data.status_name
        this.status = res.data.status
        this.form.order_id = res.data.order_id
        this.form.invoice_status = res.data.invoice_status
        this.form.track_number = res.data.track_number
        this.form.msg = res.data.msg
        this.getTrafficPayStatus()//结算状态列表
      })
    },
    //重置表单
    handleReset() {
      this.resetForm('form')
    },

    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    },
    onSubmit(formName) {
      //提交的代码
      if (this.status == 1) {
        this.rules.check_url[0].required = true
        this.rules.coin[0].required = false
        this.rules.bankcard[0].required = false
        this.rules.email[0].required = false
        this.rules.username[0].required = false
        this.rules.order_id[0].required = false
      } else {
        if (this.status == 2) {
          this.rules.coin[0].required = true
          this.rules.bankcard[0].required = true
          this.rules.email[0].required = true
          this.rules.username[0].required = true
          this.rules.order_id[0].required = true
        } else {
          this.rules.coin[0].required = false
          this.rules.bankcard[0].required = false
          this.rules.email[0].required = false
          this.rules.username[0].required = false
          this.rules.order_id[0].required = false
        }
        this.rules.check_url[0].required = false
        if (this.form.invoice_status == 0) {
          //发票未发送
          this.rules.track_number[0].required = false
        }
      }
      let form = {}
      if (this.status == 1) {
        //当前状态--结算中
        form = {
          id: this.rowitem.jd_id,
          msg: this.form.msg,
          check_url: this.form.check_url,
          status: this.form.status,
          type: this.form.type
        }
      } else if (this.status == 2) {
        //当前状态---付款中
        form = JSON.parse(JSON.stringify(this.form))
        delete form.check_url//删除结算单
        if (this.form.invoice_status == 0) {
          delete form.track_number
        }
      } else if (this.status == 4) {
        //当前状态已付款
        if (this.form.invoice_status == 0) {
          form = {
            id: this.rowitem.jd_id,
            msg: this.form.msg,
            status: this.form.status,
            invoice_status: this.form.invoice_status
          }
        } else {
          form = {
            id: this.rowitem.jd_id,
            msg: this.form.msg,
            status: this.form.status,
            invoice_status: this.form.invoice_status,
            track_number: this.form.track_number
          }
        }

      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          reqPayCheck(form).then(res => {
            this.$modal.msgSuccess('提交成功');
            this.$emit('getList');
            this.handleCloseDialog();
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    downFile(row) {
      let url = this.form.check_url
      const a = document.createElement('a')
      a.href = url;
      a.download = '结算单.xls' // 下载后文件名
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click() // 点击下载
      document.body.removeChild(a) // 下载完成移除元素
    }
  }

}
</script>

<style scoped lang="scss">
.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
</style>
